<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工减少查看</title>

    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>


    <!--    引入Layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
    <script type="text/javascript" src="/admin/html/module/yumenyoutian/js/api.js"></script>

    <style>
        .concent {
            display: flex;
            justify-content: space-between;
        .input_box {
            height: 500px;
            overflow: auto;
        }
        .personList{
            max-height: 500px;
            overflow-y: auto;
        }
        }

        body{
            padding: 25px;
        }
    </style>

</head>
<body>

    <div id="app">
        <!-- flex布局 -->
        <div class="concent">
            <div class="input_box">
                <template>
                    <div>
                        <el-form size="mini" label-width="125px" ref="form" inline :model="formData" >
                            <el-form-item :label="item.lable" :class="item.lableLength>8?'changeLHight':''" :key="index" :prop="item.key" v-for="(item,index) in list" >
                                <!--输入框-->
                                <el-input
                                        v-if="item.type == 0"
                                        :prop = "item.key"
                                        v-model="formData[item.key]"
                                        class="inputWidth"
                                        :placeholder="'请输入'+item.lable"
                                        :id="module+''+item.keyupsxh"
                                        :keyupsxh = "item.keyupsxh"
                                        
                                        :type="item.columntype"
                                        min="0"
                                        disabled
                                        
                                ></el-input>



                                <!--日期框-->
                                <el-date-picker
                                        v-if="item.type == 1"
                                        :prop = "item.key"
                                        v-model="formData[item.key]"
                                        type="date"
                                        :placeholder="'请输入'+item.lable"
                                        value-format="yyyy-MM-dd"
                                        class="inputWidth"

                                        :id="module+''+item.keyupsxh"
                                        :keyupsxh = "item.keyupsxh"
                                        
                                        disabled

                                >
                                </el-date-picker>

                                <!--时分秒日期框-->
                                <el-date-picker
                                        :prop = "item.key"
                                        v-if="item.type == 5"
                                        v-model="formData[item.key]"
                                        type="datetime"
                                        :placeholder="'请输入'+item.lable"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        class="dateInputWidth"

                                        :id="module+''+item.keyupsxh"
                                        :keyupsxh = "item.keyupsxh"
                                        
                                        disabled
                                >
                                </el-date-picker>

                                <!--下拉框-->
                                <el-select
                                        :prop = "item.key"
                                        v-else-if="item.type == 6"
                                        class="inputWidth"
                                        v-model="formData[item.key]"
                                        :placeholder="'请选择'+item.lable"

                                        :id="module+''+item.keyupsxh"
                                        :keyupsxh = "item.keyupsxh"
                                        
                                        disabled
                                        
                                >
                                    <el-option
                                            v-for="item2 in item.searchTypeForSelectDtos"
                                            :key="item2.value"
                                            :label="item2.showValue"
                                            :value="item2.value"
                                    ></el-option>
                                </el-select>


                                <!--下拉框-->
                                <el-select
                                        :prop = "item.key"
                                        v-else-if="item.type == 8"
                                        class="inputWidth"
                                        v-model="formData[item.key]"
                                        :placeholder="'请选择'+item.lable"

                                        :id="module+''+item.keyupsxh"
                                        :keyupsxh = "item.keyupsxh"
                                        
                                        disabled
                                        
                                >
                                    <el-option
                                            v-for="item2 in item.searchTypeForSelectDtos"
                                            :key="item2.value"
                                            :label="item2.showValue"
                                            :value="item2.value"
                                    ></el-option>
                                </el-select>


                            </el-form-item>
                        </el-form>

                    </div>
                </template>
            </div>
            <div style="width: 400px">
                <template>
                    <el-table
                            ref="commonTable"
                            :data="tableData"
                            @row-click="rowClick"
                            highlight-current-row
                            style="width: 100%; margin-right: 10px"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <template v-if="tableId == '30'">
                            <el-table-column label="身份证号" prop="jmsfzh"> </el-table-column>
                            <el-table-column label="姓名" prop="xm"> </el-table-column>
                            <el-table-column label="个人编号" prop="zgbh"> </el-table-column>
                        </template>
                        <template v-else>
                            <el-table-column label="身份证号" prop="aac002"> </el-table-column>
                            <el-table-column label="姓名" prop="aac003"> </el-table-column>
                            <el-table-column v-if="tableId == '41'" label="个人编号" prop="aac001">
                            </el-table-column>
                            <el-table-column v-else label="家属编号" prop="pcc001"> </el-table-column>
                        </template>
                    </el-table>
                </template>
            </div>
        </div>
    </div>

    <script>

        var vm = new Vue({
           el:"#app",
           data:{
               tableData:[],
               formData:{},
               tableId:"",
               module:"",
               list:[],
               parmsData : {},
               loading:false,
           },
           created(){
               this.parmsData = getParams();
               this.tableId = this.parmsData.tableId;
               this.module = this.parmsData.module;
               this.getData();
           },
            methods:{
                // 点击表格行
                rowClick(row) {
                    this.changeWorker(row);
                },
                // 点击右侧数据渲染左侧表单
                async changeWorker(row) {
                    this.loading = true;
                    this.formData = row;
                    setTimeout(() => {
                        this.loading = false;
                    }, 500);
                },
                async getData(){
                    let res = await api.post("/admin/api/system/SystemCommonBusinessController/getInputDisplayFields",{id:this.tableId,module:this.module})
                    this.list = res.data;

                    this.getFormData();
                },
                // 获取员工和家属修改审核查看表单
                async getFormData() {
                    console.log("表单ID：", this.tableId);
                    const params = {
                        dataids: this.parmsData.dataid,
                        tableId: this.tableId,
                    };
                    const res = await api.queryBody(
                        "/admin/api/bfmc/BasicInformationModificationController/reduceAndAddApprovalFormViewing",
                        params
                    );
                    if (res.code == 1) {
                        console.log('11',res.data);
                        setTimeout(()=>{
                            vm.render(res.data);
                        },500);

                    } else {
                        this.$message.error(res.msg);
                    }
                },
                // 渲染全部页面
                async render(dataObj) {
                    this.formData = dataObj.input;
                    this.tableData = await dataObj.list;
                },
            }
        });


        function getData(){
            return {};
        }
    </script>
</body>
</html>